<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Mini Vue</title>
</head>
<body>
<div id="app">
  <h1>=================差值表达式演示=====================</h1>
  <h3>{{msg}}</h3>
  <h3>{{count}}</h3>
  <br/>
  <br/>
  <br/>
  <h1>=================v-text演示=================</h1>
  <div v-text="msg"></div>
  <br/>
  <br/>
  <br/>
  <h1>=================v-html演示=================</h1>
  <div v-html="h1"></div>
  <br/>
  <br/>
  <br/>
  <h1>=================v-on:click演示=================</h1>
  <button v-on:click="clickFn">CLICK ME</button>
  <br/>
  <br/>
  <br/>
  <h1>=================v-on:mouseEnter演示=================</h1>
  <button v-on:mouseEnter="mouseEnterFn">光标移入</button>
  <br/>
  <br/>
  <br/>
</div>

<script src="js/Dep.js"></script>
<script src="js/Watcher.js"></script>
<script src="js/observe.js"></script>
<script src="js/compiler.js"></script>
<script src="js/vue.js"></script>
<script>
  const vue = new Vue({
    data: {
      msg: 'Mike',
      count: 12,
      h1:'<h1>您好！！！</h1>',
      person: {
        name: "tom",
        age: 4
      },
      clickFn(){
        alert("点击事件触发了")
      },
      mouseEnterFn(){
        alert("光标移入了")
      }
    },
    el: '#app'
  })
</script>
</body>
</html>